<template>
  <div>
    <!-- -------------------------搜索栏------------------------- -->
    <div class="tt">
      <el-form :inline="true" :model="queryUser" ref="queryUser">
        <el-form-item style="line-height: 0%" prop="realName">
          <el-input
            v-model="queryUser.realName"
            placeholder="用户名"
            :clearable="true"
          ></el-input>
        </el-form-item>
        <el-form-item style="line-height: 0%" prop="dateRange">
          <el-date-picker
            v-model="queryUser.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item style="line-height: 0%">
          <el-button type="primary" @click="loadUsers"
            ><i class="el-icon-search"></i
          ></el-button>
          <el-button @click="resetForm('queryUser')">重置</el-button>
          <el-button type="success" @click="addDialog = true">添加</el-button>
        </el-form-item>
      </el-form>
    </div>
<!-- -------------------------表格数据展示------------------------- -->
    <el-table :data="tableData" style="width: 100%; line-height: 0%">
      <el-table-column label="头像" width="150">
        <template slot-scope="scope">
          <span style="margin-left: 0px">
            <img :src="scope.row.headImg" style="width: 60px; height: 60px" />
          </span>
        </template>
      </el-table-column>
      <el-table-column label="账号" width="150">
        <template slot-scope="scope">
          <i class="el-icon-phone"></i>
          <span style="margin-left: 10px">{{ scope.row.tel }}</span>
        </template>
      </el-table-column>
      <el-table-column label="姓名" width="150">
        <template slot-scope="scope">
          <i class="el-icon-s-custom"></i>
          <span style="margin-left: 10px">{{ scope.row.realName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="入职日期" width="150">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.brithday }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="150">
        <template slot-scope="scope">
          <i class="el-icon-s-opportunity"></i>
          <span style="margin-left: 10px" v-if="scope.row.status == 1"
            >正常</span
          >
          <span style="margin-left: 10px" v-if="scope.row.status == 2"
            >封禁</span
          >
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" @click="handleEdit(scope.row.id)"
            >禁用</el-button
          >
          <el-button
            size="mini"
            type="success"
            @click="handleDelete(scope.row.id)"
            >恢复</el-button
          >
          <el-button
            size="mini"
            type="primary"
            @click="assignRole(scope.row.id)"
            >分配角色</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- -------------------------给用户授权---------------------------- -->
    <el-dialog
      title="授权"
      :visible.sync="assingRolesVisible"
      style="height=30%"
    >
      <el-checkbox-group v-model="checkedRoles">
        <el-checkbox :label="item.id" v-for="item in rolesList" :key="item">{{
          item.roleName
        }}</el-checkbox>
      </el-checkbox-group>
      <span slot="footer" class="dialog-footer">
        <el-button @click="assingRolesVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveUserRoles">确 定</el-button>
      </span>
    </el-dialog>
    <!-- -------------------------添加------------------------- -->
    <el-dialog
      title="添加员工"
      :visible.sync="addDialog"
      width="30%"
      height="30%"
    >
      <el-form :model="addForm" :rules="rules" ref="addForm">
        <el-row>
          <el-col :span="15">
            <el-form-item
              label="账号/手机号"
              :label-width="formLabelWidth"
              prop="tel"
            >
              <el-input v-model="addForm.tel" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialog = false">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </div>
    </el-dialog>
    <!-- -------------------------分页------------------------- -->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryUser.currentPage"
        :page-sizes="[2, 10, 20, 50]"
        :page-size="queryUser.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      addDialog: false,
      addForm: {},
      assingRolesVisible: false,
      rolesList: [], //角色
      checkedRoles: [], //选中的角色数组
      uid: "",
      page: {
        total: 0, //总条数
      },
      queryUser: {
        realName: "",
        dateRange: [],
        currentPage: 1, //当前页
        pageSize: 2, //每页显示的条数
      },
      tableData: [],
      perm: {
        id: 0,
        status: 0,
      },
    };
  },
  methods: {
    // 添加员工
      add() {
      this.$axios.post("/auth-serv/users/add", this.addForm).then((res) => {
        if (res.data.code == 200) {
          this.$message.success("添加成功");
          this.addDialog = false; //关于dialog
          this.$refs.addForm.resetFields(); //重置form
          this.loadUsers();
        }else{
          this.$message.error(res.data.message);
        }
      });
    },
    //清除搜索框内容
    resetForm(queryUser) {
      this.$refs[queryUser].resetFields();
      this.handleCurrentChange(1);
    },
    //删除当前用户的角色，授予新的角色
    saveUserRoles() {
      this.$axios
        .put("/auth-serv/roles", {
          uid: this.uid,
          rids: this.checkedRoles,
        })
        .then((res) => {
          if ((res.data.code = 200)) {
            this.assingRolesVisible = false;
            this.loadUsers();
          } else {
            this.$message.error("出错了");
          }
        });
    },
    // 用户授权角色-展示出当前角色以及所有角色列表
    assignRole(id) {
      this.assingRolesVisible = true;
      this.uid = id;
      this.$axios
        .get("/auth-serv/roles/" + id)
        .then((res) => {
          if (res.data.code == 200) {
            this.rolesList = res.data.data.rolesList;
            this.checkedRoles = res.data.data.checkedRoles;
          } else {
            this.$message.error("出错了");
          }
        })
        .catch((error) => {
          this.$message.error("出错了！请稍后重试");
        });
    },
    //禁用用户
    handleEdit(id) {
      this.perm.id = id;
      this.perm.status = 2;
      this.$axios.put("/auth-serv/users/changePer", this.perm).then((res) => {
        if (res.data.code == 200) {
          this.loadUsers();
        }
      });
    },
    //恢复用户
    handleDelete(id) {
      this.perm.id = id;
      this.perm.status = 1;
      this.$axios.put("/auth-serv/users/changePer", this.perm).then((res) => {
        if (res.data.code == 200) {
          this.loadUsers();
        }
      });
    },
    //每页显示的条数变化时
    handleSizeChange(val) {
      this.queryUser.pageSize = val;
      this.loadUsers();
    },
    // 当前页数变化时
    handleCurrentChange(val) {
      this.queryUser.currentPage = val;
      this.loadUsers();
    },
    loadUsers() {
      this.$axios
        .post("/auth-serv/users/queryAll", this.queryUser)
        .then((res) => {
          if (res.data.code == 200) {
            this.tableData = res.data.data.userList;
            this.page.total = res.data.data.pageInfo.total;
          } else {
            this.$message.error(res.data.message);
          }
        });
    },
  },

  mounted() {
    this.loadUsers();
  },
};
</script>
<style scoped>
.tt {
  height: 60px;
}
</style>
